<template>
	<view class="calendar">
		<view class="myWork">我的排班</view>
		<wn-calendar
			ref="calendar" 
			:isBorder="true" 
			:isLess="false"
			:isEn="false" 
			format="/" 
			:colors="['#f6f6f6','#02B714', '#2A7DFB', '#F98316']"
			:data="data" 
			@choose="chooseData"
		></wn-calendar>
	</view>
</template>
<script>
	export default {
		components: {},
		data() {
			return {
				showCalendar: false,
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				data:[
					{ date: '2024/1/1', text: '晚班', type: 2 },
					{ date: '2024/1/2', text: '早班', type: 1 },
					{ date: '2024/1/3', text: '全天', type: 3 },
					{ date: '2024/1/4', text: '晚班', type: 2 },
					{ date: '2024/1/5', text: '早班', type: 1 },
					{ date: '2024/1/6', text: '全天', type: 3 },
					{ date: '2024/1/7', text: '晚班', type: 2 },
					{ date: '2024/1/8', text: '早班', type: 1 },
					{ date: '2024/1/9', text: '晚班', type: 2 },
					{ date: '2024/1/10', text: '全天', type: 3 },
					{ date: '2024/1/11', text: '晚班', type: 2 },
				]
			}
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// TODO 模拟请求异步同步数据
			setTimeout(() => {
				this.info.date = getDate(new Date(), -30).fullDate
				this.info.startDate = getDate(new Date(), -60).fullDate
				this.info.endDate = getDate(new Date(), 30).fullDate
				this.info.selected = [{
						date: getDate(new Date(), -3).fullDate,
						info: '打卡'
					},
					{
						date: getDate(new Date(), -2).fullDate,
						info: '签到',
						data: {
							custom: '自定义信息',
							name: '自定义消息头'
						}
					},
					{
						date: getDate(new Date(), -1).fullDate,
						info: '已打卡'
					}
				]
			}, 2000)
		},
		methods: {
			open() {
				this.$refs.calendar.open()
			},
			close() {
			},
			change(e) {
				// 模拟动态打卡
				if (this.info.selected.length > 5) return
				this.info.selected.push({
					date: e.fulldate,
					info: '打卡'
				})
			},
			confirm(e) {
			},
			monthSwitch(e) {
			},
			chooseData(date) {
				this.$emit('chooseDate', date);
			}
		}
	}
</script>

<style>
.container {
  margin: 20px;
}

.header {
  font-size: 24px;
  text-align: center;
  margin-bottom: 10px;
}

.weekdays {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.weekday {
  width: calc(100% / 7);
  text-align: center;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
}

.date {
  text-align: center;
}
</style>
